<template>
  <a-card :bordered="false">
    <!-- 查询区域 -->
    <div class="table-page-search-wrapper">
      <a-form layout="inline" @keyup.enter.native="searchQuery">
        <a-row :gutter="24">
          <a-col :md="4" :sm="6">
            <a-form-item :label="$t('sensor.sensor')">
              <a-select v-model="queryParam.sensorCode"  v-decorator="[ 'sensorCode']" :placeholder="$t('base.pleaseChoose')">
                <a-select-option value=""> {{$t('base.pleaseChoose')}} </a-select-option>
                <a-select-option v-for="item in sensorList" :key="item.id" :value="item.code">
                  {{item.name}}
                </a-select-option>
              </a-select>
            </a-form-item>
          </a-col>
          <a-col :md="6" :sm="4">
            <a-form-item :label="$t('base.createTime')">
              <a-range-picker
                style="width: 210px"
                v-model="queryParam.createTimeRange"
                format="YYYY-MM-DD"
                :placeholder="[$t('base.startTime'), $t('base.endTime') ]"
                @change="onDateChange"
              />
            </a-form-item>
          </a-col>

          <a-col :md="6" :sm="8">
            <span style="float: left;overflow: hidden;" class="table-page-search-submitButtons">
              <a-button type="primary" @click="searchQuery" icon="search"> {{$t('base.query')}} </a-button>
              <a-button type="primary" @click="searchReset" icon="reload" style="margin-left: 8px"> {{$t('base.reset')}} </a-button>
            </span>
          </a-col>


        </a-row>
      </a-form>
    </div>
    <!-- 查询区域-END -->
    <!-- table区域-begin -->
    <div>
      <a-table
        ref="table"
        size="middle"
        bordered
        rowKey="id"
        :columns="columns"
        :dataSource="dataSource"
        :pagination="ipagination"
        :loading="loading"
        @change="handleTableChange">
        <template slot="wdSlot" slot-scope="text, record, index">
          <span v-if="record.alarmFlagWd" style="color: red">{{record.temperature}}</span>
          <span v-if="!record.alarmFlagWd" >{{record.temperature}}</span>
        </template>

        <template slot="sdSlot" slot-scope="text, record, index">
          <span v-if="record.alarmFlagSd" style="color: red">{{record.humidity}}</span>
          <span v-if="!record.alarmFlagSd" >{{record.humidity}}</span>
        </template>

        <template slot="pm25Slot" slot-scope="text, record, index">
          <span v-if="record.alarmFlagPm25" style="color: red">{{record.pm25}}</span>
          <span v-if="!record.alarmFlagPm25" >{{record.pm25}}</span>
        </template>

        <template slot="co2Slot" slot-scope="text, record, index">
          <span v-if="record.alarmFlagCo2" style="color: red">{{record.pm10}}</span>
          <span v-if="!record.alarmFlagCo2" >{{record.pm10}}</span>
        </template>

        <span slot="action" slot-scope="text, record">
          <a @click="handleEdit(record)">编辑</a>
          <a-divider type="vertical" />
          <a-dropdown>
            <a class="ant-dropdown-link">更多 <a-icon type="down" /></a>
            <a-menu slot="overlay">
              <a-menu-item>
                <a-popconfirm title="确定删除吗?" @confirm="() => handleDelete(record.id)">
                  <a>删除</a>
                </a-popconfirm>
              </a-menu-item>
            </a-menu>
          </a-dropdown>
        </span>

      </a-table>
    </div>

  </a-card>
</template>

<script>

    import { JeecgListMixin } from '@/mixins/JeecgListMixin'
    import JInput from '@/components/jeecg/JInput'
    import { filterObj } from '@/utils/util'
    import { httpAction } from '@/api/manage'
    export default {
        name: "GlrSensorDataList",
        mixins:[JeecgListMixin],
        components: {
            JInput
        },
        data () {
            return {
                description: '摄像头管理页面',
                imagstr:"/assets/guaz.png",
                // 表头
                columns: [
                    {
                        title: '#',
                        dataIndex: '',
                        key:'rowIndex',
                        width:60,
                        align:"center",
                        customRender:function (t,r,index) {
                            return parseInt(index)+1;
                        }
                    },
                    {
                        title:this.$t('base.name'),
                        align:"center",
                        dataIndex: 'sensorName'
                    },
                    {
                        title:this.$t('light.temperatureDw'),
                        align:"center",
                        scopedSlots: {customRender: "wdSlot"}
                    },
                    {
                        title:this.$t('sensor.humidity'),
                        align:"center",
                        scopedSlots: {customRender: "sdSlot"}
                    },
                    {
                        title: 'PM2.5(ug/m³)',
                        align:"center",
                        scopedSlots: {customRender: "pm25Slot"}
                    },
                    {
                        title: 'Co2(ppm)',
                        align:"center",
                        scopedSlots: {customRender: "co2Slot"}
                    },
                    {
                        title:this.$t('base.createTime'),
                        align:"center",
                        dataIndex: 'createTime',
                        customRender:function (text) {
                            return !text?"":(text.length>19?text.substr(0,19):text)
                        }
                    }
                ],
                url: {
                    list: "/glr/glrSensorData/list",
                    delete: "/glr/glrSensorData/delete",
                    deleteBatch: "/glr/glrSensorData/deleteBatch",
                    exportXlsUrl: "/glr/glrSensorData/exportXls",
                    importExcelUrl: "glr/glrSensorData/importExcel",
                    getGlrSensorList:"/glr/glrSensor/getGlrSensorList",
                },
                sensorList:[]
            }
        },
        created(){
            var that=this;
            httpAction(that.url.getGlrSensorList,{},"post").then((res)=>{
                if(res.success){
                    that.sensorList=res.result;
                }else{
                    that.$message.warning(res.message);
                }
            }).finally(() => {
                that.confirmLoading = false;
            });
        },
        computed: {
            importExcelUrl: function(){
                return `${window._CONFIG['domianURL']}/${this.url.importExcelUrl}`;
            }
        },
        methods: {
            initDictConfig(){
            },
            getAvatarView: function (status) {
                if(status=='Y'){
                    return   require('@/assets/img/zaixian.png');
                }else{
                    return   require('@/assets/img/lixian.png');
                }
            },
            onDateChange: function (value, dateString) {
                this.queryParam.createTime_begin=dateString[0];
                this.queryParam.createTime_end=dateString[1];
            },
            getQueryParams(){
                var param = Object.assign({}, this.queryParam,this.isorter);
                param.field = this.getQueryField();
                param.pageNo = this.ipagination.current;
                param.pageSize = this.ipagination.pageSize;
                delete param.createTimeRange; // 时间参数不传递后台
                if (this.superQueryParams) {
                    param['superQueryParams'] = encodeURI(this.superQueryParams)
                    param['superQueryMatchType'] = this.superQueryMatchType
                }
                return filterObj(param);
            },

        }
    }
</script>
<style scoped>
  @import '~@assets/less/common.less'
</style>